<template>
<!-- 头部的整体的输入框 -->
<div class="header">
    <!-- 头部左侧的内容 -->
    <div class="header-left">
        <div class="iconfont back-icon">&#xe6a4;</div>
    </div>
    <div class="header-input">
        <i class="iconfont">&#xe618;</i>
        输入城市/经典游玩主题</div>
    <router-link to="/city">
        <!-- 下面的上海可以用this.city代替，只是没有用接口引入数据，就直接用了上海 -->
        <div class="header-right">
            {{this.cityAction}}
            <i class="iconfont">&#xe69b;</i>
        </div>
    </router-link>
</div>
</template>

<script>
import {
    mapState
} from 'vuex'
export default {
    name: 'Home',
    props: {
        city: String,

    },
    computed: {
        ...mapState({
            cityAction: state => state.city
        })
    }
}
</script>

<style scoped>
.header {
    line-height: 35px;
    color: #fff;
    display: flex;
    background-color: #00bcd4;

}

;

.header-left {
    width: 32px;
    float: left;
}

.header-input {
    flex: 1;
    height: 25px;
    line-height: 25px;
    margin: 5px 10px 5px 10px;
    background-color: #fff;
    border-radius: 5px;
    color: #ccc;
}

.header-right {
    min-width: 3rem;
    padding-right: .1rem;
    float: right;
    text-align: center;
    color: white;
}

.back-icon {
    text-align: center;
    font-size: 20px;
}
</style>
